<html>
<head>
    <title>断点续传</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="/cy/webuploader-2.0.0.js"></script>
    <link href="/cy/webuploader-2.0.0.css" type="text/css" />
</head>
<body>
<div id="uploader" class="wu-example">
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
        <br>
        <input type="text" width="200" id="contextId"/>
        <br>
        <button type="button" id="deleteBtn">删除</button>
        <button type="button" id="convertBtn">转换</button>
        <br>
        <input type="text" width="200" id="convId"/>
        <br>
        <button type="button" id="convertStatusBtn">转换结果</button>
        <br>
        <input type="text" width="225" id="videoSrc" />
        <button type="button" id="videoBtn">视频</button>
    </div>

    <video id="videoDemo" src="" width="500" height="300" controls="controls"></video>
</div>
</body>
<script>
    var uploader = WebUploader.create({
        // 选择文件的按钮
        pick: '#picker',
        // 不压缩image, 一定要设置成false，否则会有其他问题
        compress: false,
        // 是否开启大文件分片上传，默认为true
        chunked: true,
        // 分片上传线程数，默认为3，如果使用断点续传建议线程数改为1
        threads: 1,
        // 如果某个分片由于网络问题出错，允许自动重传多少次，默认为2
        chunkRetry: 2,
        // 每一片的大小，默认为10M
        chunkSize: 1024 * 1024 * 10,
        // 上传超时时间，默认为2分钟
        timeout: 15 * 60 * 1000,
        // 是否允许同一个文件重复上传，默认为false
        duplicate: true,
        // 非官方参数，文件大小超过该值则进行分片，默认为10M
        thresholdSize: 1024 * 1024 * 10,
        // 非官方参数，是否支持切换至阿里云，有特殊需求的项目可以开通此项，需要进行授权，默认为false
        uploadToThirdPartyStorage: false,
        // 非官方参数，是否开启秒传，默认为true，强烈建议开启。秒传关闭情况，阿里云分片上传默认无MD5
        checkMd5: true,
        // 自定义预上传路径
        preparePath: '/file/prepare',
        // 自定义文件合成路径
        completePath: '/file/complete',
        // 自定义文件秒传路径
        checkPath: '/file/check'
    });
    //上传成功
    uploader.on('uploadSuccess', function (file) {
        // file.contextId为文件contextId，file.url为文件下载地址
        console.info('uploadSuccess', file)
    });
    //上传过程
    uploader.on('uploadProgress', function (file, percentage) {
        // percentage为上传进度，0-1之间
        console.info('uploadProgress', file, percentage)
    });
    //上传失败
    uploader.on('uploadError', function (file, reason) {
        // 上传失败的原因reason
        console.info('uploadError', file, reason)
    });
    //md5计算过程
    uploader.on('md5Progress', function (percentage, file) {
        // 如果开启秒传，则md5计算过程percentage为计算进度，0-1之间
        console.info('md5Progress', file, percentage)
    });
    //文件被加入队列
    uploader.on('fileQueued', function (file) {
        // 可以用于展示文件名file.name等操作
        console.info('fileQueued', file)
    });

    $("#ctlBtn").on('click', function () {
        //  文件上传
        uploader.upload();
    });

    $("#deleteBtn").click(function () {
        var contextId = $("#contextId").val();
        $.ajax({
            url: "/file/delete",
            type: 'POST',
            dataType: 'json',
            data: {
                contextId
            }
        }).then(function (resp) {
            console.info(resp);
        });
    });

    $("#convertBtn").click(function () {
        var contextId = $("#contextId").val();
        $.ajax({
            url: "/file/convert",
            type: 'POST',
            dataType: 'json',
            data: {
                contextId
            }
        }).then(function (resp) {
            console.info(resp);
        });
    });

    $("#convertStatusBtn").click(function () {
        var convId = $("#convId").val();
        $.ajax({
            url: "/file/convertStatus",
            type: 'POST',
            dataType: 'json',
            data: {
                convId
            }
        }).then(function (resp) {
            console.info(resp);
        });
    })

    $("#videoBtn").click(function () {
        var videoSrc = $("#videoSrc").val();
        $("#videoDemo").attr("src", videoSrc);
    })
</script>
</html>